<template>
  <Ripple
    class="trust-headerItem-icon"
    @click="onClick"
    circle>
    <i :class="currentIcon"/>
    <Badge v-if="count" class="badge" v-model="count" />
  </Ripple>
</template>

<script>
  import Ripple from '../../Ripple/index.vue'

  export default {
    props: {
      options: {}
    },
    components: {
      Ripple
    },
    computed: {
      currentIcon() {
        return this.options.icon
      },
      currentClick() {
        return this.options.click
      },
      count () {
        return this.options.count
      }
    },
    methods: {
      onClick(...args) {
        this.currentClick && this.currentClick(...args)
      }
    }
  }
</script>

<style
  lang="stylus"
  rel="stylesheet/stylus"
  type="text/stylus">
  .trust-headerItem-icon
    display: inline-flex
    width: 32px
    height: 32px
    margin-bottom: 4px
    align-items: center
    justify-content: center

    i
      font-size: 20px

    .badge
      top: 5px
      left: 93%
      padding: 0 6px
</style>
